<template>
  <div class="flex flex-col h-full bg-white">
    <div class="flex flex-row items-center px-6 h-[70px] w-full">
      <van-icon name="arrow-left" @click="router.back()" />
      <div class="flex-1 text-center font-bold">注册账号</div>
      <div class="px-2 py-1 text-xs text-[#436BFF] bg-[#436BFF1A] rounded">纪要</div>
    </div>

    <div class="flex-auto px-6">
      <van-form @submit="onSubmit">
        <van-field
          v-model="formData.phone"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <van-field
          v-model="formData.code"
          center
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#436BFF"
              :disabled="counting"
              @click="getCode"
            >
              {{ counting ? `${counter}s后重试` : '获取验证码' }}
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model="formData.password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <van-field
          v-model="formData.confirmPassword"
          type="password"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="[{ required: true, message: '请再次输入密码' }]"
        />
        
        <div class="mt-8">
          <van-button round block type="primary" native-type="submit" color="#436BFF">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const counting = ref(false)
const counter = ref(60)

const formData = ref({
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
})

const getCode = () => {
  if (!formData.value.phone) {
    showToast('请先输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(formData.value.phone)) {
    showToast('请输入正确的手机号')
    return
  }

  // 模拟发送验证码
  showToast('验证码已发送')
  counting.value = true
  counter.value = 60
  
  const timer = setInterval(() => {
    counter.value--
    if (counter.value <= 0) {
      clearInterval(timer)
      counting.value = false
      counter.value = 60
    }
  }, 1000)
}

const onSubmit = () => {
  if (formData.value.password !== formData.value.confirmPassword) {
    showToast('两次输入的密码不一致')
    return
  }
  
  // 模拟注册成功
  showToast('注册成功')
  setTimeout(() => {
    router.push('/login')
  }, 1500)
}
</script>

<style lang="less" scoped>
:deep(.van-field) {
  padding: 16px 0;
}
</style> 